<template>
	<div class="pageBg">
		<div>
			<div class="head" ref="head">
				<van-icon name="arrow-left" class="back" @click="routerBack"/>
				<van-search 
					v-model="searchvalue" 
					placeholder="请输入目的地名称" 
					@search="Search"
					@input="input"
				/>
			</div>
			<div class="bdscroll" :class="{scrolly:scrolly}">
				<div class="body">
					<div v-if="$store.state.dataLoading">
						<van-loading 
							color="#1989fa" 
							type="spinner" 
							class="dataLoading" 
							v-show="$store.state.dataLoading" 
						/>
					</div>
					<div v-else>
						<!-- 搜索框输入展示内容 -->
						<div class="searchshow" v-if="isSearch">
							<div class="search_result" v-if="!empty">
								<van-cell v-for="item,index in searchResult" :key="index" @click="getEnd(item)">
									<span class="PrintName active">{{ item.PrintName }}</span>
									<span class="belongPro">{{ item.Province }}</span>
								</van-cell>
							</div>
							<van-empty image="search" description="非常抱歉暂无该城市车次" v-else/>
						</div>
						<!-- indexBar -->
						<div v-else>
							<!-- 返回数据带拼音时排版 -->
							<van-index-bar highlight-color="#438bf7" sticky :sticky-offset-top="0" v-if="spell">
							 <div v-for="(item,index) in barData" :key="index" >
								 <van-index-anchor :index="item.index"/>
								 <van-cell v-for="(el,elindex) in item.PrintNameList" :key="elindex" @click="getEnd(el)">
								 	<span class="PrintName">{{el.PrintName}}</span>
								 	<span class="belongPro">{{el.Province}}</span>
								 </van-cell>
							 </div>
							</van-index-bar>
							<!-- 返回数据不带拼音时排版 -->
							<div class="nospell" v-else>
								<van-cell v-for="(item,index) in spellData" :key="index" @click="getEnd(item)">
									<span class="PrintName">{{item.PrintName}}</span>
									<span class="belongPro">{{item.Province}}</span>
								</van-cell>
							</div>
						</div>
						<!-- body END -->
					</div>
					<div v-show="timeOut" @click="getStartData">
						<van-empty image="network" description="网络超时请点此处重试"/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import authMixin from '@/mixin/mixin'
	export default {
		data() {
			return {
				spell:false, //返回数据是否有首字母拼音
				timeOut:false,
				stickH:0,
				empty:false,
				isSearch:false,  //是否通过搜索框搜索
				searchvalue:''  ,//搜索框值
        searchResult:[],
				resData:[],
				barData:{
					A:{
						index:'A',
						PrintNameList:[
						]
					},
					B:{
						index:'B',
						PrintNameList:[
						]
					},
					C:{
						index:'C',
						PrintNameList:[
						]
					},
					D:{
						index:'D',
						PrintNameList:[
						]
					},
					E:{
						index:'E',
						PrintNameList:[
						]
					},
					F:{
						index:'F',
						PrintNameList:[
						]
					},
					G:{
						index:'G',
						PrintNameList:[
						]
					},
					H:{
						index:'H',
						PrintNameList:[
						]
					},
					I:{
						index:'I',
						PrintNameList:[
						]
					},
					J:{
						index:'J',
						PrintNameList:[
						]
					},
					K:{
						index:'K',
						PrintNameList:[
						]
					},
					L:{
						index:'L',
						PrintNameList:[
						]
					},
					M:{
						index:'M',
						PrintNameList:[
						]
					},
					N:{
						index:'N',
						PrintNameList:[
						]
					},
					O:{
						index:'O',
						PrintNameList:[
						]
					},
					P:{
						index:'P',
						PrintNameList:[
						]
					},
					Q:{
						index:'Q',
						PrintNameList:[
						]
					},
					R:{
						index:'R',
						PrintNameList:[
						]
					},
					S:{
						index:'S',
						PrintNameList:[
						]
					},
					T:{
						index:'T',
						PrintNameList:[
						]
					},
					U:{
						index:'U',
						PrintNameList:[
						]
					},
					V:{
						index:'V',
						PrintNameList:[
						]
					},
					W:{
						index:'W',
						PrintNameList:[
						]
					},
					X:{
						index:'X',
						PrintNameList:[
						]
					},
					Y:{
						index:'Y',
						PrintNameList:[
						]
					},
					Z:{
						index:'Z',
						PrintNameList:[
						]
					}
				},
		  spellData:[]	//返回数据不带拼音时数据
			}
		},
		mixins:[authMixin],
		created(){
			this.$store.commit("setDataLoading", true)
			this.getStartData()
			console.log(this.resData)
		},
		mounted(){
			this.stickH = this.$refs.head.offsetHeight - 2
		},
		methods:{
			input(){
				this.isSearch = true
				let arr = this.resData.filter(item=>{
					return item.PrintName.includes(this.searchvalue)
				})
				this.searchResult = arr
				if(!this.searchvalue){
					this.isSearch = false
				}
			},
			Search(){
				//搜索
			  let arr = this.resData.filter(item=>{
			  	return item.PrintName.includes(this.searchvalue)
			  })
				this.searchResult = arr
			},
			routerBack(){
				this.$router.go(-1)
			},
			getStartData(){
				this.timeOut = false
				this.$request({
					method:'get',
					url:'/index/querysiteinfo'
				}).then(res=>{
					this.$store.commit("setDataLoading", false)
					if(res.data && res.data.length){
						res.data.forEach(item=>{
							let objdata = `{
								"PrintName":"${item.StopName}",
								"Province":"${item.ProvinceRegion}",
								"StopCode":"${item.StopCode}"
							}`
							this.resData.push(JSON.parse(objdata))
						})
						if(res.data[0].hasOwnProperty("Spell")){
							//返回数据带拼音
							 this.spell = true
							 Object.keys(this.barData).forEach(el=>{
								 this.sortCityPinYin(res.data, el)
							 })
							 Object.getOwnPropertyNames(this.barData).forEach(key=>{  //没有数据则删除该字母
								 if(!this.barData[key].PrintNameList.length){
									//  delete this.barData[key]
									 vue.delete(this.barData,key)
								 }
							 })
						}else{
							//返回数据不带拼音
							res.data.forEach(item=>{
								this.spell = false
								let obj = {
									PrintName:item.PrintName,
									Province:item.Province,
									StopCode:item.StopCode,
									Lng: item.Lng,
									Lat: item.Lat
								}
								_this.spellData.push(obj)
							})
						}
	
					}
					
				}).catch(err=>{
					this.$store.commit("setDataLoading", false)
					if(err.message.includes('timeout')){
						this.timeOut = true
					}
					console.log(err)
				})
			},
			getEnd(el){
				this.$router.back()
				this.$store.commit("setEndPrintName", el.PrintName)
				this.$store.commit("setStopCode", el.StopCode)
				console.log(el)
			},
			async sortCityPinYin(val,P){
				await val.filter(item=>{
					return item.Spell.substr(0,1).toUpperCase() == P
				}).forEach(el=>{
					let obj = `{
						"PrintName":"${el.StopName}",
						"Province":"${el.ProvinceRegion}",
						"StopCode":"${el.StopCode}",
						"Lng":"${el.Lng}",
						"Lat":"${el.Lat}"
						}`
						this.barData[P].PrintNameList.push(JSON.parse(obj))
				})
			}
		}
	}
</script>
<style scoped>
	.bgcolor{
		background: #f7f8fa;
	}
	.head{
		display: flex;
		align-items: center;
		width: 100%;
		position: relative;
		z-index: 5;
		height: 1.43rem;
		background: #fff;
	}
	.bdscroll{
		margin-top: -.1rem;
		position: relative;
		z-index: 1;
		height: calc(100vh - 1.3rem);
		overflow-y:auto;
	}

	.PrintName{
		font-size: .36rem;
		margin-right: .32rem;
	}
	.belongPro{
		margin-left: .2rem;
		color: #ccc;
		font-size: .34rem;
	}
	.searchshow{
		/* background: #fff; */
	}
	.PrintName.active{
		color: #438bf7;
	}
	.van-cell{
		padding: 0.26667rem 0.45rem;
	}
	.back{
		margin-left: .3rem;
		font-size: .55rem;
		color: #999;
		text-align: center;
	}
	.van-search{
		flex: 1;
		padding: 0.26667rem 0.3rem;
	}
	.head .van-cell{
		padding-left: 0;
		padding-top: .1rem;
		padding-bottom: .1rem;
	}
</style>
